import React, { useState } from 'react'
import Title from '../../../../components/afterLoan/Title';
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    InputNumber,
    Switch,
    Tag,
    Row,
    Col
} from 'antd';

export default function RateAdd({ history, location }) {
    const [isChoose, setIsChoose] = useState(false)
    const chooseId = () => {
        setIsChoose(true)
    }
    return (
        <div className='rate-add'>
            <Title goBack={history.goBack} title="办理利率变更"></Title>
            <Form
                style={{
                    backgroundColor: '#fff',
                    paddingTop: 20,
                    paddingBottom: 20
                }}
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 5,
                }}
                layout="horizontal"
                size='large'
                name="nest-messages"
            >
                <Form.Item label="贷款编号" initialValue={location.state === 1 ? 10001 : null} name='loanafter_id' rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>
                    <Select style={{ minWidth: 100, marginRight: 10 }} placeholder="选择贷款编号" onChange={chooseId} disabled={location.state === 1}>
                        <Select.Option value={1}>10001</Select.Option>
                    </Select>
                </Form.Item>
                {(isChoose || location.state === 1) && <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                    <span style={{ marginRight: 40 }}>贷款人姓名：张某某</span>
                    <span style={{ marginRight: 40 }}>贷款期限：24期</span>
                    <span style={{ marginRight: 40 }}>贷款金额：48000元</span>
                    <span style={{ marginRight: 40 }}>贷款余额：36500元</span>
                    <span style={{ marginRight: 40 }}>还款方式：等额本息</span>
                </Form.Item>}
                <Form.Item label="借款利率" >
                    <Input.Group compact>
                        <Form.Item initialValue={(130 / 10).toFixed(1)} name="loanafter_rate">
                            <Input disabled></Input>
                        </Form.Item>
                        <Form.Item style={{ marginLeft: 10 }}>%</Form.Item>
                    </Input.Group>
                </Form.Item>
                <Form.Item label="调整后利率" name="loanafter_change_rate" rules={
                    [{ required: true }]
                }>
                    <Input.Group compact>
                        <Form.Item name="loanafter_change_rate" initialValue={location.state === 1 ? 12 : null}>
                            <Input disabled={location.state === 1}></Input>
                        </Form.Item>
                        <Form.Item style={{ marginLeft: 10 }}>%</Form.Item>
                    </Input.Group>
                </Form.Item>
                <Form.Item label="变更类型" initialValue={location.state === 1 && 1} name='loanafter_change_type' rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>
                    <Select style={{ minWidth: 100, marginRight: 10 }} placeholder="请选择" disabled={location.state === 1}>
                        <Select.Option value={1} >类型1</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="变更描述" name="loanafter_change_descriptiion" initialValue={location.state === 1 ? "查询到的值" : ''}>
                    <textarea cols="100" rows="6" disabled={location.state === 1}></textarea>
                </Form.Item>
                {location.state != 1 &&
                    <Form.Item wrapperCol={{ offset: 7, span: 16 }}>

                        <Button type="primary" htmlType="submit" size='default'>
                            提交
                        </Button>
                        <Button type="default" size='default' style={{ marginLeft: 100 }} onClick={() => {
                            history.goBack()
                        }}>
                            返回
                        </Button>
                    </Form.Item>}
            </Form>
        </div>
    )
}
